<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="telephone=no,email=no" name="format-detection">
    <meta name="applicable-device" content="mobile">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
    <title>Document</title>
    <link rel="stylesheet" href="css/sonlist.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<style>
    textarea {
        outline: none;
    }
    body {
        overflow-x: hidden;
    }
</style>
<body>
    <section class="header_box">
        <!-- <div class="filter_img" style="background:url(images/song_list_title1.jpg);">
        </div>
        <div class="header_box_content">
            <span class="red_icon">歌单</span>
            <div class="header_img" >
                <i class="header_count">310.3万</i>
                <img src="images/song_list_title1.jpg" alt="">
            </div>
            <div class="header_content">
                <h3>你会对我第二次心动吗</h3>
                <a href="#" class="header_content_content">
                    <div class="user_img">
                        <img src="images/user.jpg">
                    </div>
                    <div class="user_text">将爱意邮寄你</div>
                    <span class="user_img_icon" style="background-image: url(//s3.music.126.net/mobile-new/img/usericn_3x.png?71c26f8…=);"></span>
                </a>
            </div>
        </div> -->
    </section>
    <div class="play_list">
        <h2>歌单列表</h2>
        <!-- 歌单列表 -->
        <div class="play_list_content">
            
            <!-- <a class="nav_2_content_content_li" href="//music.163.com/m/song?id=1849998058">
                <div class="nav2_li1">15</div>
                <div class="nav_2-3">
                    <div class="nav2_li2">
                        <div class="nav2_li2_line1">22秒</div>
                        <div class="nav2_li2_line2"><i class="u-hmsprt sghot"></i>Aioz - 22秒</div>
                    </div>
                    <div class="nav2_li3"><span class="u-hmsprt sgchply"></span></div>
                </div>
            </a>

            <a class="nav_2_content_content_li" href="//music.163.com/m/song?id=1849998058">
                <div class="nav2_li1">15</div>
                <div class="nav_2-3">
                    <div class="nav2_li2">
                        <div class="nav2_li2_line1">22秒</div>
                        <div class="nav2_li2_line2"><i class="u-hmsprt sghot"></i>Aioz - 22秒</div>
                    </div>
                    <div class="nav2_li3"><span class="u-hmsprt sgchply"></span></div>
                </div>
            </a>
            <a class="nav_2_content_content_li" href="//music.163.com/m/song?id=1849998058">
                <div class="nav2_li1">15</div>
                <div class="nav_2-3">
                    <div class="nav2_li2">
                        <div class="nav2_li2_line1">22秒</div>
                        <div class="nav2_li2_line2"><i class="u-hmsprt sghot"></i>Aioz - 22秒</div>
                    </div>
                    <div class="nav2_li3"><span class="u-hmsprt sgchply"></span></div>
                </div>
            </a>
            <a class="nav_2_content_content_li" href="//music.163.com/m/song?id=1849998058">
                <div class="nav2_li1">15</div>
                <div class="nav_2-3">
                    <div class="nav2_li2">
                        <div class="nav2_li2_line1">22秒</div>
                        <div class="nav2_li2_line2"><i class="u-hmsprt sghot"></i>Aioz - 22秒</div>
                    </div>
                    <div class="nav2_li3"><span class="u-hmsprt sgchply"></span></div>
                </div>
            </a>
            <a class="nav_2_content_content_li" href="//music.163.com/m/song?id=1849998058">
                <div class="nav2_li1">15</div>
                <div class="nav_2-3">
                    <div class="nav2_li2">
                        <div class="nav2_li2_line1">22秒</div>
                        <div class="nav2_li2_line2"><i class="u-hmsprt sghot"></i>Aioz - 22秒</div>
                    </div>
                    <div class="nav2_li3"><span class="u-hmsprt sgchply"></span></div>
                </div>
            </a> -->



        </div>
        <div class="play_list_last">
            <a href="#">查看更多歌曲，请下载客户端</a>
        </div>
        <!-- 精彩评论 -->
        <div class="comment_nice">
            <h3>精彩评论</h3>
            <div class="comment_nice_ul">
                <!-- <div class="comment_nice_li">
                    <div class="comment_nice_li_user_img">
                        <img src="images/commnet_user.jpg">
                    </div>
                    <div class="comment_nice_li_content">
                        <div class="agree_count">
                            <span>290</span>
                            <svg class="agree_img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path fill="#999" d="m25.857 14.752c-.015.059-1.506 5.867-2.932 8.813-1.162 2.402-3 2.436-3.099 2.436h-12.826v-13c3 0 5.728-4 5.728-7.275 0-3.725 1.433-3.725 2.142-3.725 1.327 0 1.978 1.345 1.978 4 0 2.872-.832 4.525-.839 4.537-.161.31-.155.682.027.981.181.299.5.482.849.482h6.942c.922 0 1.551.215 1.866.64.467.626.286 1.705.164 2.112m-23.857 10.248v-10c0-1.795.659-1.981.855-2h2.145v13h-2.173c-.829 0-.827-.648-.827-1m25.309-13.54c-.713-.969-1.886-1.46-3.482-1.46h-5.519c.26-.932.519-2.285.519-4 0-5.221-2.507-6-4-6-1.909 0-4.185.993-4.185 5.725 0 2.206-1.923 5.275-3.815 5.275h-4-.011c-1.034.011-2.816.862-2.816 4v10.02c0 1.198.675 2.979 2.827 2.979h16.971.035c.364 0 3.224-.113 4.894-3.564 1.514-3.127 3.01-8.942 3.056-9.14.071-.23.664-2.289-.474-3.836"></path></svg>
                        </div>
                        <div class="comment_nice_li_user_name">没错冯宝宝</div>
                        <div class="comment_nice_li_time">2021年2月13日</div>
                        <div class="comment_nice_li_comment">对啊，昨晚和他连麦一晚，他心动了💓，我有点
                            帮帮我，单数回头，双数止步</div>
                    </div>
                </div>
                <div class="comment_nice_li">
                    <div class="comment_nice_li_user_img">
                        <img src="images/commnet_user.jpg">
                    </div>
                    <div class="comment_nice_li_content">
                        <div class="agree_count">
                            <span>290</span>
                            <svg class="agree_img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path fill="#999" d="m25.857 14.752c-.015.059-1.506 5.867-2.932 8.813-1.162 2.402-3 2.436-3.099 2.436h-12.826v-13c3 0 5.728-4 5.728-7.275 0-3.725 1.433-3.725 2.142-3.725 1.327 0 1.978 1.345 1.978 4 0 2.872-.832 4.525-.839 4.537-.161.31-.155.682.027.981.181.299.5.482.849.482h6.942c.922 0 1.551.215 1.866.64.467.626.286 1.705.164 2.112m-23.857 10.248v-10c0-1.795.659-1.981.855-2h2.145v13h-2.173c-.829 0-.827-.648-.827-1m25.309-13.54c-.713-.969-1.886-1.46-3.482-1.46h-5.519c.26-.932.519-2.285.519-4 0-5.221-2.507-6-4-6-1.909 0-4.185.993-4.185 5.725 0 2.206-1.923 5.275-3.815 5.275h-4-.011c-1.034.011-2.816.862-2.816 4v10.02c0 1.198.675 2.979 2.827 2.979h16.971.035c.364 0 3.224-.113 4.894-3.564 1.514-3.127 3.01-8.942 3.056-9.14.071-.23.664-2.289-.474-3.836"></path></svg>
                        </div>
                        <div class="comment_nice_li_user_name">
                            没错冯宝宝
                            <i class="vip"></i>
    
                        </div>
                        <div class="comment_nice_li_time">2021年2月13日</div>
                        <div class="comment_nice_li_comment">对啊，昨晚和他连麦一晚，他心动了💓，我有点
                            帮帮我，单数回头，双数止步</div>
                    </div>
                </div>
                <div class="comment_nice_li">
                    <div class="comment_nice_li_user_img">
                        <img src="images/commnet_user.jpg">
                    </div>
                    <div class="comment_nice_li_content">
                        <div class="agree_count">
                            <span>290</span>
                            <svg class="agree_img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path fill="#999" d="m25.857 14.752c-.015.059-1.506 5.867-2.932 8.813-1.162 2.402-3 2.436-3.099 2.436h-12.826v-13c3 0 5.728-4 5.728-7.275 0-3.725 1.433-3.725 2.142-3.725 1.327 0 1.978 1.345 1.978 4 0 2.872-.832 4.525-.839 4.537-.161.31-.155.682.027.981.181.299.5.482.849.482h6.942c.922 0 1.551.215 1.866.64.467.626.286 1.705.164 2.112m-23.857 10.248v-10c0-1.795.659-1.981.855-2h2.145v13h-2.173c-.829 0-.827-.648-.827-1m25.309-13.54c-.713-.969-1.886-1.46-3.482-1.46h-5.519c.26-.932.519-2.285.519-4 0-5.221-2.507-6-4-6-1.909 0-4.185.993-4.185 5.725 0 2.206-1.923 5.275-3.815 5.275h-4-.011c-1.034.011-2.816.862-2.816 4v10.02c0 1.198.675 2.979 2.827 2.979h16.971.035c.364 0 3.224-.113 4.894-3.564 1.514-3.127 3.01-8.942 3.056-9.14.071-.23.664-2.289-.474-3.836"></path></svg>
                        </div>
                        <div class="comment_nice_li_user_name">没错冯宝宝</div>
                        <div class="comment_nice_li_time">2021年2月13日</div>
                        <div class="comment_nice_li_comment">对啊，昨晚和他连麦一晚，他心动了💓，我有点
                            帮帮我，单数回头，双数止步对啊，昨晚和他连麦一晚，他心动了💓，我有点
                            帮帮我，单数回头，双数止步对啊，昨晚和他连麦一晚，他心动了💓，我有点
                            帮帮我，单数回头，双数止步</div>
                    </div>
                </div>
                <div class="comment_nice_li">
                    <div class="comment_nice_li_user_img">
                        <img src="images/commnet_user.jpg">
                    </div>
                    <div class="comment_nice_li_content">
                        <div class="agree_count">
                            <span>290</span>
                            <svg class="agree_img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path fill="#999" d="m25.857 14.752c-.015.059-1.506 5.867-2.932 8.813-1.162 2.402-3 2.436-3.099 2.436h-12.826v-13c3 0 5.728-4 5.728-7.275 0-3.725 1.433-3.725 2.142-3.725 1.327 0 1.978 1.345 1.978 4 0 2.872-.832 4.525-.839 4.537-.161.31-.155.682.027.981.181.299.5.482.849.482h6.942c.922 0 1.551.215 1.866.64.467.626.286 1.705.164 2.112m-23.857 10.248v-10c0-1.795.659-1.981.855-2h2.145v13h-2.173c-.829 0-.827-.648-.827-1m25.309-13.54c-.713-.969-1.886-1.46-3.482-1.46h-5.519c.26-.932.519-2.285.519-4 0-5.221-2.507-6-4-6-1.909 0-4.185.993-4.185 5.725 0 2.206-1.923 5.275-3.815 5.275h-4-.011c-1.034.011-2.816.862-2.816 4v10.02c0 1.198.675 2.979 2.827 2.979h16.971.035c.364 0 3.224-.113 4.894-3.564 1.514-3.127 3.01-8.942 3.056-9.14.071-.23.664-2.289-.474-3.836"></path></svg>
                        </div>
                        <div class="comment_nice_li_user_name">没错冯宝宝</div>
                        <div class="comment_nice_li_time">2021年2月13日</div>
                        <div class="comment_nice_li_comment">对啊，昨晚和他连麦一晚，他心动了💓，我有点
                            帮帮我，单数回头，双数止步</div>
                    </div>
                </div> -->
            </div>
            
        </div>
        <!-- 最新评论 -->
        <div class="comment_new">
            <h3>最新评论(<span>398</span>)</h3>
            <div class="comment_new_ul">
                <div class="comment_nice_li">
                    <div class="comment_nice_li_user_img">
                        <img src="images/commnet_user.jpg">
                    </div>
                    <div class="comment_nice_li_content">
                        <div class="agree_count">
                            <span>290</span>
                            <svg class="agree_img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path fill="#999" d="m25.857 14.752c-.015.059-1.506 5.867-2.932 8.813-1.162 2.402-3 2.436-3.099 2.436h-12.826v-13c3 0 5.728-4 5.728-7.275 0-3.725 1.433-3.725 2.142-3.725 1.327 0 1.978 1.345 1.978 4 0 2.872-.832 4.525-.839 4.537-.161.31-.155.682.027.981.181.299.5.482.849.482h6.942c.922 0 1.551.215 1.866.64.467.626.286 1.705.164 2.112m-23.857 10.248v-10c0-1.795.659-1.981.855-2h2.145v13h-2.173c-.829 0-.827-.648-.827-1m25.309-13.54c-.713-.969-1.886-1.46-3.482-1.46h-5.519c.26-.932.519-2.285.519-4 0-5.221-2.507-6-4-6-1.909 0-4.185.993-4.185 5.725 0 2.206-1.923 5.275-3.815 5.275h-4-.011c-1.034.011-2.816.862-2.816 4v10.02c0 1.198.675 2.979 2.827 2.979h16.971.035c.364 0 3.224-.113 4.894-3.564 1.514-3.127 3.01-8.942 3.056-9.14.071-.23.664-2.289-.474-3.836"></path></svg>
                        </div>
                        <div class="comment_nice_li_user_name">没错冯宝宝</div>
                        <div class="comment_nice_li_time">2021年2月13日</div>
                        <div class="comment_nice_li_comment">对啊，昨晚和他连麦一晚，他心动了💓，我有点
                            帮帮我，单数回头，双数止步</div>
                    </div>
                </div>
                <div class="comment_nice_li">
                    <div class="comment_nice_li_user_img">
                        <img src="images/commnet_user.jpg">
                    </div>
                    <div class="comment_nice_li_content">
                        <div class="agree_count">
                            <span>290</span>
                            <svg class="agree_img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path fill="#999" d="m25.857 14.752c-.015.059-1.506 5.867-2.932 8.813-1.162 2.402-3 2.436-3.099 2.436h-12.826v-13c3 0 5.728-4 5.728-7.275 0-3.725 1.433-3.725 2.142-3.725 1.327 0 1.978 1.345 1.978 4 0 2.872-.832 4.525-.839 4.537-.161.31-.155.682.027.981.181.299.5.482.849.482h6.942c.922 0 1.551.215 1.866.64.467.626.286 1.705.164 2.112m-23.857 10.248v-10c0-1.795.659-1.981.855-2h2.145v13h-2.173c-.829 0-.827-.648-.827-1m25.309-13.54c-.713-.969-1.886-1.46-3.482-1.46h-5.519c.26-.932.519-2.285.519-4 0-5.221-2.507-6-4-6-1.909 0-4.185.993-4.185 5.725 0 2.206-1.923 5.275-3.815 5.275h-4-.011c-1.034.011-2.816.862-2.816 4v10.02c0 1.198.675 2.979 2.827 2.979h16.971.035c.364 0 3.224-.113 4.894-3.564 1.514-3.127 3.01-8.942 3.056-9.14.071-.23.664-2.289-.474-3.836"></path></svg>
                        </div>
                        <div class="comment_nice_li_user_name">
                            没错冯宝宝
                            <i class="vip"></i>
    
                        </div>
                        <div class="comment_nice_li_time">2021年2月13日</div>
                        <div class="comment_nice_li_comment">对啊，昨晚和他连麦一晚，他心动了💓，我有点
                            帮帮我，单数回头，双数止步</div>
                    </div>
                </div>
            </div>
            <div class="comment_new_last">
                <span>查看全部<span class="last_count">398</span>条评论 <i></i></span>
            </div>
        </div>
    </div>
    <div class="comment_box" style="z-index: 1000; width: 100%;text-align: center;position: fixed;bottom: 0px; background-color: #fff;">
        <span class="comment_solider" style="display: inline-block; width: 100px; height: 23px;line-height: 23px;    border-top-left-radius: 15px;border-top-right-radius: 15px;background-color: #f2f2f2;color: #666;font-size: 12px;">上拉</span>
        <div class="comment_send" style="display: none; width: 100%;height: 300px;">
            <textarea   id="comment_content_new" cols="30" rows="10" placeholder="你想说什么" style="padding: 20px
            ; width: 100%; border:2px solid #cfd8dc ;box-sizing: border-box;"></textarea>
            
            <button class="comment_link" style="display: inline-block; width: 60px;height: 35px;background-color: #00bcd4; color: #fff;text-align: center;line-height: 35px;border: 0;position: absolute;bottom: 64px; right: 7px;">发送</button>
            <span>评论区请友善发言哦~</span>
    
    </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script>
        var flag=false;
        $(".comment_solider").on("click",function(){
            flag=!flag;
            if(flag){
                $(".comment_solider").text('下拉')
            } else {
                $(".comment_solider").text('上拉')
            }
            $(".comment_send").stop().toggle(800)
        })
        
    </script>
    <script src="js/sonlist.js"></script>
</body>
</html>